/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Icon } from 'antd';
import { hashHistory } from 'react-router';
import style from './style.css';
import * as actions from '../../../actions/openVideo';

@connect(
  (state, props) => ({
    openVideo: state.openVideo,
  }), actions
)
export default class extends Component {

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { update, location } = this.props;
    const { type } = location.query;
    update({
      type: +type,
    });
    if (+type === 1) {
      document.title = '英语动画片';
    } else if (+type === 2) {
      document.title = '自然拼读';
    }
  }

  goDetail = (id) => () => {
    const { type } = this.props.location.query;
    hashHistory.push(`/open/video/detail?type=${type}&id=${id}`);
  };

  render() {
    const { openVideo, search, changeInput } = this.props;
    const { type, searchResult, searching } = openVideo;
    const videoType = `video${type}`;
    let videoList = openVideo[videoType] || [];
    if (searching) {
      videoList = searchResult;
    }

    return (
      <div className={style.container}>
        <div className={style.topbar}>
          <input className={style.search} type="search" placeholder="您要找什么" onChange={changeInput} />
          <button className={style.btn} onClick={search}><Icon type="search" /></button>
        </div>
        <ul className={style.list}>
          {
            videoList.map((item, index) =>
              <li className={style.items} key={item.id} onClick={::this.goDetail(item.id)}>
                <div className={style.items_container}>
                  <div className={style.items_img}>
                    <img src={item.avatar} />
                  </div>
                  <div className={style.items_content}>
                    <div className={style.items_title}>{item.name}</div>
                    <div className={style.items_time}>{item.duration}</div>
                  </div>
                </div>
              </li>
            )
          }
        </ul>
        {
          videoList.length === 0 ? <div style={{ textAlign: 'center', marginTop: '30px' }}>没有找到</div> : null
        }
      </div>
    );
  }
}